<template>
	<view>
		<view v-if="arctileObj">
			<view class="custom-pd-lr custom-mt" v-if="arctileObj.image">
				<image class="custom-banner" :src="bannerImgUrl" mode="widthFix"></image>
			</view>
		
			<view v-for="(floor,index) in arctileObj.thematicFloorList" :key="index">
				<view class="project-title">{{floor.title}}</view>
				<view class="product-list" v-if="index == 0">
					<uni-row :gutter="20" :width="windowWidth">
						<uni-col :span="8" v-for="item in hotList" :key="item.farmProduceId">
							<view class="product-item"
								@click="goTo(`../productDetails/productDetails?id=${item.farmProduceId}`)">
								<image :src="imgUrl + item.image + '?x-image-process=style/style-list'" mode="scaleToFill"></image>
								<view class="product-con">
									<view class="label">{{item.resume}}</view>
									<view class="title"><text>{{item.title}}</text></view>
									<view><text class="price">¥{{item.price}}</text></view>
									<view class="vender">{{item.providerName}}</view>
								</view>
							</view>
						</uni-col>
						
					</uni-row>
				</view>
				<view class="product-list" v-else>
					<uni-row :gutter="20" :width="windowWidth">
						<template v-if="list[`${index}`]">
						<uni-col :span="12" v-for="item in list[`${index}`].list" :key="item.farmProduceId">
							<view class="product-item" @click="goTo(`../productDetails/productDetails?id=${item.farmProduceId}`)">
								<image v-if="item.image" :src="imgUrl + item.image + '?x-image-process=style/style-list'"
									mode="scaleToFill"></image>
								<image v-else src="https://staticfile-yj.obs.cn-north-4.myhuaweicloud.com/none.png" mode="scaleToFill">
									</image>
								<view class="product-con">
									<view class="label">{{item.resume}}</view>
									<view class="title"><text>{{item.title}}</text></view>
									<view><text class="price">¥{{item.price}}</text><text class="see"
											v-if="item.browseNum">{{item.browseNum}}次浏览</text></view>
									<view class="vender">{{item.providerName}}</view>
								</view>
							</view>
						</uni-col>
						</template>
						
					</uni-row>
				</view>
				
			</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">加载中...</view>
	</view>
</template>

<script>imgUrl
	import {
		baseurl,
		queryThematicGame,
		queryThematicProduce
	} from "@/api/user.js"
	let imgUrl = "https://nongmao.obs.cn-north-4.myhuaweicloud.com/"
	export default {
		data() {
			return {
				imgUrl,
				bannerImgUrl: '',
				parmas: '',
				arctileObj: {
					image:'',
					thematicFloorList:[]
				},
				showLoadMore: false,
				hotList: [],
				list: {},
				page: 1,
				maxpage: 0,
				windowWidth: 375,
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			this.parmas = option.id;
		},
		onShow() {
			this.windowWidth = getApp().globalData.windowWidth;
		},
		onReady() {
			this.showLoadMore = true;
			console.log("onload", this.arctileObj)
			this.queryThematicGame(this.parmas);
		},
		onPullDownRefresh(){
			this.showLoadMore = true;
			this.queryThematicGame(this.parmas);
			uni.stopPullDownRefresh();
		},
		methods: {
			async queryThematicGame(options) {
				const res = await queryThematicGame(options);
				console.log(res)
				this.arctileObj = res.returnObj;
				if (this.arctileObj.image) {
					uni.downloadFile({
						url: `${baseurl}/nb-as/1.0.1/FileService/downloadFile?fileId=${this.arctileObj.image}`,
						success: (res) => {
							if (res.statusCode === 200) {
								console.log("image", res);
								this.bannerImgUrl = res.tempFilePath
							}
						}
					});
				}
				if (this.arctileObj.thematicFloorList.length != 0) {
					this.arctileObj.thematicFloorList.forEach((i,index) => {
						let obj = {
							"condition": {"thematicFloorId":i.id},
							"pageNum": 1,
							"pageSize": 10
						}
						this.queryThematicProduce(obj, index);
					})
					//console.log("list",this.list)
				}
				this.showLoadMore = false;
			},
			async queryThematicProduce(options, type) {
				const res = await queryThematicProduce(options);
				if (type == 0) {
					this.hotList = res.returnObj.list.slice(0, 3)
				} else {
					this.$set(this.list,type,res.returnObj)
					//this.list = res.returnObj; 
				}
			},
			goTo(e) {
				var url = e;
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: linear-gradient(180deg, #CEF0FF 0%, #F5F8FB 100%);
		background-repeat: no-repeat;
	}

	/* banner1 */

	.custom-banner {
		width: 100%;
		//height: auto;
		border-radius: 12px;
	}

	.project-title {
		color: #283241;
		font-size: 36rpx;
		line-height: 26px;
		height: 26px;
		text-align: center;
		font-weight: 500;
		background-image: url("https://staticfile-yj.obs.myhuaweicloud.com/%E6%A0%87%E9%A2%98.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 300rpx;
		margin: 15px auto 0;
	}

	.product-item image {
		width: 100%;
		height: 150px;
		border-radius: 8px 8px 0 0;
	}
</style>